<template>
    <main-layout>
        <!-- Hero Section -->
        <section class="relative h-[600px] overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-black">


            <!-- 动态光效 -->
            <div class="absolute inset-0">

                <div
                    class="absolute top-0 left-1/4 w-96 h-96 bg-red-500 rounded-full mix-blend-multiply filter blur-[128px] animate-pulse-slow opacity-30">
                </div>
                <div
                    class="absolute bottom-0 right-1/4 w-96 h-96 bg-blue-500 rounded-full mix-blend-multiply filter blur-[128px] animate-pulse-slow opacity-30">
                </div>
            </div>

            <!-- 主要内容 -->
            <div class="relative max-w-7xl mx-auto px-4 h-full flex items-center">
                <!-- 替换动态背景网格为 tsParticles -->
                <vue-particles id="tsparticles" :particlesInit="particlesInit" :options="{
                    background: {
                        color: {
                            value: 'transparent'
                        }
                    },
                    fpsLimit: 60,
                    particles: {
                        color: {
                            value: '#ffffff'
                        },
                        links: {
                            color: '#ffffff',
                            distance: 150,
                            enable: true,
                            opacity: 0.2,
                            width: 1
                        },
                        move: {
                            enable: true,
                            speed: 1,
                            direction: 'none',
                            random: false,
                            straight: false,
                            outModes: {
                                default: 'bounce'
                            },
                            attract: {
                                enable: false,
                                rotateX: 600,
                                rotateY: 1200
                            }
                        },
                        number: {
                            value: 80,
                            density: {
                                enable: true,
                                area: 800
                            }
                        },
                        opacity: {
                            value: 0.3
                        },
                        shape: {
                            type: 'circle'
                        },
                        size: {
                            value: { min: 1, max: 3 }
                        }
                    },
                    detectRetina: true
                }" class="absolute inset-0" />
                <div class="text-white space-y-8" v-motion-slide-visible-once-bottom>
                    <!-- 标题带高光效果 -->
                    <h1
                        class="text-5xl md:text-7xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-white via-gray-200 to-gray-400 leading-tight">
                        {{ $tm('about.hero.title') }}
                    </h1>

                    <!-- 描述文本带打字机效果 -->
                    <p class="text-xl md:text-2xl text-gray-300 max-w-2xl typewriter">
                        {{ $tm('about.hero.description') }}
                    </p>

                    <!-- 按钮组 -->
                    <div class="flex gap-4 pt-8">
                        <button
                            class="px-8 py-4 bg-gradient-to-r from-red-600 to-red-800 rounded-lg hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-red-500/50">
                            {{ $tm('about.hero.more') }}
                        </button>
                        <button
                            class="px-8 py-4 border border-white/30 rounded-lg hover:bg-white/10 transition-all duration-300 backdrop-blur-sm">
                            {{ $tm('about.hero.contact') }}
                        </button>
                    </div>
                </div>

                <!-- 装饰元素 -->
                <div class="absolute right-0 bottom-0 w-1/3 h-full opacity-50 hidden md:block">
                    <div class="relative h-full">
                        <div class="absolute inset-0 bg-gradient-to-tr from-transparent to-white/10"></div>
                        <div class="absolute inset-0 backdrop-blur-sm"></div>
                        <!-- 可以添加一些几何图形或科技感的SVG -->
                    </div>
                </div>
            </div>
        </section>

        <!-- Story Timeline Section -->
        <section class="py-20 bg-white">
            <div class="max-w-7xl mx-auto px-4">
                <!-- Desktop Timeline -->
                <div class="relative hidden md:block">
                    <!-- 主时间轴线 -->
                    <div
                        class="absolute h-[2px] bg-gradient-to-r from-gray-100 via-gray-300 to-gray-100 top-1/2 left-0 right-0">
                    </div>

                    <!-- 时间轴项目 -->
                    <div class="relative flex justify-between">
                        <div v-for="(item, index) in $tm('about.story.timeline')" :key="index" class="relative flex-1">

                            <!-- 时间点 -->
                            <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
                                <!-- 添加连接虚线 -->
                                <div class="absolute w-[2px] border-l-2 border-dashed border-red-300 left-1/2 -translate-x-1/2"
                                    :class="index % 2 === 0 ? 'top-0' : 'bottom-0'" :style="{
                                        height: `6rem`
                                    }">
                                </div>

                                <div class="w-8 h-8 bg-white rounded-full border-4 border-red-500 shadow-lg relative">
                                    <div
                                        class="absolute w-4 h-4 bg-red-500 rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                                    </div>
                                </div>
                            </div>

                            <!-- 内容卡片 -->
                            <div class="mx-8" :class="{ 'mt-96': index % 2 === 0, 'mb-96': index % 2 !== 0 }">
                                <!-- 描述文本 - 优化卡片样式 -->
                                <div
                                    class="bg-white rounded-xl p-8 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow">
                                    <!-- 年份 - 调整字体大小 -->
                                    <div
                                        class="text-3xl font-bold bg-gradient-to-r text-center from-red-500 to-red-600 bg-clip-text text-transparent mb-6">
                                        {{ item.year }}
                                    </div>
                                    <!-- 标题和描述 - 优化间距和布局 -->
                                    <h3
                                        class="text-gray-800 font-semibold text-xl text-center mb-6 border-b border-gray-100 pb-4">
                                        {{ item.title }}
                                    </h3>
                                    <p class="text-gray-600 text-center leading-relaxed">{{ item.description }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mobile Timeline -->
                <div class="md:hidden space-y-16">
                    <div v-for="(item, index) in $tm('about.story.timeline')" :key="index" class="relative">
                        <!-- 垂直线 -->
                        <div class="absolute left-6 top-0 h-full w-[2px] bg-gradient-to-b from-red-400 to-red-600">
                        </div>

                        <!-- 时间点 -->
                        <div
                            class="absolute left-4 top-8 w-8 h-8 bg-white rounded-full border-4 border-red-500 shadow-lg">
                            <div
                                class="absolute w-3 h-3 bg-red-500 rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                            </div>
                        </div>

                        <!-- 内容 - 增加间距和优化布局 -->
                        <div class="ml-24">
                            <div
                                class="text-4xl font-bold bg-gradient-to-r from-red-500 to-red-600 bg-clip-text text-transparent mb-6">
                                {{ item.year }}
                            </div>
                            <div class="bg-white rounded-xl p-8 shadow-lg border border-gray-100">
                                <p class="text-gray-800 font-semibold text-xl mb-4">{{ item.title }}</p>
                                <p class="text-gray-600 leading-relaxed">{{ item.description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Mission & Vision Section -->
        <section class="py-20">
            <div class="max-w-7xl mx-auto px-4">
                <div class="grid md:grid-cols-2 gap-12">
                    <div class="bg-white rounded-lg shadow-lg p-8 hover:shadow-xl transition-shadow duration-300 group"
                        v-motion-slide-visible-once-left>
                        <h3 class="text-2xl font-bold mb-4 group-hover:text-red-500 transition-colors duration-300">
                            {{ $tm('about.mission.mission.title') }}
                        </h3>
                        <p class="text-gray-600">{{ $tm('about.mission.mission.description') }}</p>
                    </div>
                    <div class="bg-white rounded-lg shadow-lg p-8 hover:shadow-xl transition-shadow duration-300 group"
                        v-motion-slide-visible-once-right>
                        <h3 class="text-2xl font-bold mb-4 group-hover:text-red-500 transition-colors duration-300">
                            {{ $tm('about.mission.vision.title') }}
                        </h3>
                        <p class="text-gray-600">{{ $tm('about.mission.vision.description') }}</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Core Values Section -->
        <section class="py-20 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-16">{{ $tm('about.values.title') }}</h2>
                <div class="grid md:grid-cols-4 gap-8">
                    <div v-for="(value, index) in $tm('about.values.items')" :key="index"
                        class="bg-white rounded-lg p-6 text-center transform hover:-translate-y-2 transition-all duration-300 shadow-lg group"
                        v-motion-slide-visible-once-bottom>
                        <div class="w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center">
                            <!-- 这里可以添加对应的图标 -->
                        </div>
                        <h3 class="text-xl font-bold mb-2 group-hover:text-red-500 transition-colors duration-300">
                            {{ value.title }}
                        </h3>
                        <p class="text-gray-600">{{ value.description }}</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Team Section -->
        <section class="py-20">
            <div class="max-w-7xl mx-auto px-4">
                <div class="text-center mb-16">
                    <h2 class="text-3xl font-bold mb-8">{{ $tm('about.team.title') }}</h2>
                    <blockquote class="text-2xl italic text-gray-600 max-w-3xl mx-auto">
                        "{{ $tm('about.team.quote') }}"
                    </blockquote>
                    <p class="mt-4 font-semibold">— {{ $tm('about.team.author') }}</p>
                </div>
            </div>
        </section>

        <!-- Manufacturing Network Section -->
        <section class="py-20 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4">
                <div class="grid md:grid-cols-2 gap-12 items-center">
                    <div v-motion-slide-visible-once-left>
                        <h2 class="text-3xl font-bold mb-4">{{ $tm('about.manufacturing.title') }}</h2>
                        <p class="text-gray-600 mb-8">{{ $tm('about.manufacturing.description') }}</p>
                        <div class="grid grid-cols-3 gap-8 mb-8">
                            <div class="text-center">
                                <div class="text-3xl font-bold text-red-600">{{
                                    $tm('about.manufacturing.stats.factories') }}</div>
                                <div class="text-sm text-gray-600">工厂</div>
                            </div>
                            <div class="text-center">
                                <div class="text-3xl font-bold text-red-600">{{
                                    $tm('about.manufacturing.stats.countries') }}</div>
                                <div class="text-sm text-gray-600">国家</div>
                            </div>
                            <div class="text-center">
                                <div class="text-3xl font-bold text-red-600">{{
                                    $tm('about.manufacturing.stats.partners') }}</div>
                                <div class="text-sm text-gray-600">合作伙伴</div>
                            </div>
                        </div>
                        <button class="bg-red-600 text-white px-8 py-3 rounded-lg hover:bg-red-700 transition-colors">
                            {{ $tm('about.manufacturing.cta') }}
                        </button>
                    </div>
                    <div class="grid grid-cols-2 gap-4" v-motion-slide-visible-once-right>
                        <!-- 工厂图片占位 -->
                        <div v-for="i in 4" :key="i" class="aspect-square bg-gray-200 rounded-lg"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Digital Platform Section -->
        <section class="py-20">
            <div class="max-w-7xl mx-auto px-4">
                <div class="grid md:grid-cols-2 gap-12 items-center">
                    <div class="order-2 md:order-1" v-motion-slide-visible-once-left>
                        <h2 class="text-3xl font-bold mb-4">{{ $tm('about.platform.title') }}</h2>
                        <p class="text-gray-600 mb-8">{{ $tm('about.platform.description') }}</p>
                        <ul class="space-y-4">
                            <li v-for="(feature, index) in $tm('about.platform.features')" :key="index"
                                class="flex items-center space-x-3">
                                <span
                                    class="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
                                    <span class="text-blue-600">✓</span>
                                </span>
                                <span>{{ feature }}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="order-1 md:order-2 bg-white rounded-lg shadow-xl p-4" v-motion-slide-visible-once-right>
                        <!-- 平台界面图片占位 -->
                        <div class="aspect-video bg-gray-100 rounded-lg"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Work Life Section -->
        <section class="py-20 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold mb-4">{{ $tm('about.worklife.title') }}</h2>
                    <p class="text-gray-600">{{ $tm('about.worklife.description') }}</p>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4" v-motion-slide-visible-once-bottom>
                    <!-- 工作生活图片网格 -->
                    <div v-for="i in 8" :key="i" class="group relative overflow-hidden rounded-lg aspect-square">
                        <div
                            class="absolute inset-0 bg-gray-200 transform transition-transform duration-500 group-hover:scale-110">
                            <!-- 实际使用时替换为真实图片 -->
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Digital Solutions Section -->
        <section class="py-20">
            <div class="max-w-7xl mx-auto px-4">
                <div class="text-center mb-16">
                    <h2 class="text-3xl font-bold">{{ $tm('about.solutions.title') }}</h2>
                </div>
                <div class="grid md:grid-cols-3 gap-8">
                    <div v-for="(solution, index) in $tm('about.solutions.items')" :key="index"
                        class="relative bg-white rounded-xl shadow-lg p-8 hover:shadow-2xl transition-shadow duration-300"
                        v-motion-slide-visible-once-bottom :style="{ transitionDelay: `${index * 200}ms` }">
                        <div class="w-16 h-16 mb-6 bg-blue-100 rounded-full flex items-center justify-center">
                            <!-- 解决方案图标占位 -->
                        </div>
                        <h3 class="text-xl font-bold mb-3">{{ solution.title }}</h3>
                        <p class="text-gray-600">{{ solution.description }}</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Call to Action Section -->
        <section class="py-20 bg-gradient-to-r from-blue-600 to-blue-800">
            <div class="max-w-7xl mx-auto px-4 text-center text-white">
                <div class="max-w-3xl mx-auto" v-motion-slide-visible-once-bottom>
                    <h2 class="text-3xl font-bold mb-4">{{ $tm('about.cta.title') }}</h2>
                    <p class="text-xl mb-8">{{ $tm('about.cta.description') }}</p>
                    <button
                        class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
                        {{ $tm('about.cta.button') }}
                    </button>
                </div>
            </div>
        </section>
    </main-layout>
</template>


<script setup lang="ts">
import MainLayout from '../layouts/MainLayout.vue'
import { onMounted, ref } from 'vue'
import { useMotion } from '@vueuse/motion'
import Particles from '@tsparticles/vue3'
import { Engine } from '@tsparticles/engine'
import { loadFull } from 'tsparticles'

// 添加页面滚动进度指示器
const scrollProgress = ref(0)
onMounted(() => {
    window.addEventListener('scroll', () => {
        const winScroll = document.documentElement.scrollTop
        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight
        scrollProgress.value = (winScroll / height) * 100
    })
})

// 添加初始化函数
const particlesInit = async (engine: Engine) => {
    await loadFull(engine)
}
</script>

<style scoped>
.aspect-square {
    aspect-ratio: 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

/* 添加渐入动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* 添加悬停效果 */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* 添加滚动进度条 */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(to right, #3B82F6, #1E40AF);
    z-index: 100;
}

/* 添加时间线动画 */
.timeline-point {
    transition: transform 0.3s ease;
}

.timeline-point:hover {
    transform: scale(1.5);
}

/* 添加内容卡片动画 */
.timeline-content {
    transition: all 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 添加卡片悬停效果 */
.border {
    transition: all 0.3s ease;
}

.border:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.timeline-item,
.timeline-item-mobile {
    will-change: transform, opacity;
}

.timeline-content {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-content:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.timeline-dot {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-dot:hover {
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.timeline-item,
.timeline-item-mobile {
    will-change: transform, opacity;
}

.timeline-content {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-content:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.timeline-dot-wrapper::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-dot-wrapper::before {
    width: 50px;
    height: 50px;
    background: rgba(239, 68, 68, 0.2);
}

/* 添加交错的内容布局 */
.timeline-item:nth-child(odd) .timeline-content {
    transform: translateY(-100%);
}

/* 添加渐变背景效果 */
.bg-gradient-overlay {
    background: linear-gradient(45deg, rgba(239, 68, 68, 0.05), rgba(239, 68, 68, 0.1));
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

.animate-fadeInLeft {
    animation: fadeInLeft 0.8s ease-out forwards;
    opacity: 0;
}

/* 修改粒子容器样式 */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 1;
}

/* 确保内容在粒子之上 */
.relative {
    position: relative;
    z-index: 2;
}

/* 网格背景动画 */
.bg-grid-pattern {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 背景移动动画 */
@keyframes move-bg {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100px 100px;
    }
}

.animate-move-bg {
    animation: move-bg 8s linear infinite;
}

/* 慢速脉冲动画 */
@keyframes pulse-slow {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

/* 打字��效果 */
.typewriter {
    overflow: hidden;
    border-right: 2px solid rgba(255, 255, 255, .75);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: rgba(255, 255, 255, .75)
    }
}

/* 高光效果 */
.text-gradient-shine {
    background: linear-gradient(to right,
            #fff 20%,
            #ffffffcc 40%,
            #ffffffcc 60%,
            #fff 80%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 4s linear infinite;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}
</style>